<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" /> <!--设置编码-->
    <meta http-equiv="content-type" content="text/html charset=utf-8" /> <!--模拟 http 标头的方法-->
    <meta name="author" content="sanri"> <!--提供键值对的数据-->
    <title>Title</title>
</head>
<body>
<form action="#" novalidate> <!--去掉验证-->
    验证  <br/>
    <label for="">正则验证:<input type="text" placeholder="请输入区号+座机" pattern="^[\d]{2,4}\-[\d]{6,8}$"></label><br/>
    <button type="submit">提交</button>

    <p>元数据设置</p>
    <p>全局属性:<br/>
        <ol>
            <li>id</li>
            <li>class</li>
            <li>accesskey:
                <input type="text" accesskey="n" placeholder="alt+n 定位到此元素">
            </li>
            <li>contenteditable 设置元素可修改,浏览器兼容问题,各浏览器展示不一样:
                <p contenteditable="true">这个可以修改</p>
            </li>
            <li>dir 设置文字方向 ,rtl,ltr</li>
            <li>hidden</li>
            <li lang="en">lang 局部设置语言</li>
            <li>title tips</li>
            <li>tabindex 设置 tab 顺序 </li>
            <li>style 属性</li>
        </ol>
    </p>

    <p>选择器</p>
        <ol>
            <li>+ 相邻元素选择器</li>
            <li>~ 兄弟元素选择器</li>
            <li> &gt; 直接子元素选择器</li>
        </ol>



    <p>伪元素选择器</p>
        <ol>
            <li>块级首行选择器 ::first-line</li>
            <li>块级首个字母 ::first-latter</li>
            <li>文本前插入,后插入 ::before,::after 配合 content 最常用于清除浮动</li>
        </ol>


        <p>结构性伪类选择器</p>
        <ol>
            <li>根元素选择器 :root 返回 html 元素,不用</li>
            <li>
                子元素选择器
                <ol>
                    <li>:first-child 第一个子元素</li>
                    <li>:last-child 最后一个子元素</li>
                    <li>:only-child 只有一个子元素的子元素</li>
                    <li>:only-of-type 子元素只有一种类型的子元素,只会选中第一个</li>
                </ol>
            </li>
            <li>:nth-child(2) 从 1 开始 </li>
            <li>:nth-last-child(2) 倒数第 2 个 </li>
            <li>
                常用于选中表单元素<br/>
                <ol>
                    <li>:enabled 选中启用的</li>
                    <li>:disabled 选中禁用的</li>
                    <li>:checked 勾选的</li>
                    <li>:default 用得少</li>
                    <li>:valid 合法的样式</li>
                    <li>:invalid 不合法的</li>
                    <li>:required 有必填属性</li>
                    <li>:optional 非必填属性</li>

                </ol>
            </li>
            <li>
                动态伪类
                <ol>
                    <li>:link 没有被访问</li>
                    <li>:visited 访问过了</li>
                    <li>:hover 悬浮状态</li>
                    <li>:active 激活状态,点下去不松</li>
                    <li>:focus 聚集时样式</li>
                </ol>

            </li>
            <li>
                其它伪类
                <ol>
                    <li>:not() 里面再写其它选择器</li>
                    <li>:empty 没有任何内容的元素</li>
                    <li>:lang(en) 选中英文的</li>
                    <li>:target 定位到之后选定(锚点定位之后再选中)</li>
                </ol>

            </li>

        </ol>
</form>
</body>
</html>